import { Layout, Menu, Breadcrumb, Button } from 'antd';
import React from 'react';
import { history } from 'umi';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import {
    DesktopOutlined,
    PieChartOutlined,
    PoweroffOutlined,
    AppstoreOutlined,
    BarsOutlined,
    CodeOutlined,
    UserOutlined,
    LineChartOutlined,
    BarChartOutlined,
    BookOutlined 
} from '@ant-design/icons';
import './index.less';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

export default class Index extends React.Component {
    constructor(props) {
        super(props);
    }

    state = {
        collapsed: false,
    };

    onCollapse = (collapsed) => {
        console.log(collapsed);
        this.setState({ collapsed });
    };

    render() {
        const { collapsed } = this.state;

        if (this.props.location.pathname === '/login') {
            return <>{this.props.children}</>;
        }

        return (
            <div className="Layouts">
                <Layout style={{ minHeight: '100vh' }}>
                    <Sider
                        collapsible
                        collapsed={collapsed}
                        onCollapse={this.onCollapse}
                    >
                        <div className="logo"></div>
                        <Menu
                            theme="dark"
                            defaultSelectedKeys={['6']}
                            mode="inline"
                        >
                            <Menu.Item
                                key="6"
                                onClick={() => {
                                    history.push('/statistics');
                                }}
                                icon={<BarChartOutlined />}
                            >
                                统计信息
                            </Menu.Item>
                            <Menu.Item
                                key="7"
                                onClick={() => {
                                    history.push('/form');
                                }}
                                icon={<BookOutlined />}
                            >
                                网上办证
                            </Menu.Item>
                            <Menu.Item
                                key="1"
                                onClick={() => {
                                    history.push('/index');
                                }}
                                icon={<PieChartOutlined />}
                            >
                                关键字管理
                            </Menu.Item>

                            <Menu.Item
                                key="2"
                                onClick={() => {
                                    history.push('/banner');
                                }}
                                icon={<AppstoreOutlined />}
                            >
                                banner管理
                            </Menu.Item>
                            {/* <Menu.Item
                                key="3"
                                onClick={() => {
                                    history.push('/type');
                                }}
                                icon={<BarsOutlined />}
                            >
                                分类管理
                            </Menu.Item> */}
                            <Menu.Item
                                key="4"
                                onClick={() => {
                                    history.push('/info');
                                }}
                                icon={<CodeOutlined />}
                            >
                                文章管理
                            </Menu.Item>
                            <Menu.Item
                                key="5"
                                onClick={() => {
                                    history.push('/logList');
                                }}
                                icon={<UserOutlined />}
                            >
                                用户记录
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout className="site-layout">
                        <Header
                            className="site-layout-background"
                            style={{ padding: 0 }}
                        >
                            <Button
                                className="outIn"
                                type="primary"
                                onClick={() => {
                                    localStorage.setItem('token', '');
                                    history.push('login');
                                }}
                                icon={<PoweroffOutlined />}
                            >
                                退出登录
                            </Button>
                        </Header>
                        <Content style={{ margin: '0 16px' }}>
                            <Breadcrumb style={{ margin: '16px 0' }}>
                                {/* <Breadcrumb.Item>User</Breadcrumb.Item>
                                <Breadcrumb.Item>Bill</Breadcrumb.Item> */}
                            </Breadcrumb>
                            <div
                                className="site-layout-background"
                                style={{ padding: 24, minHeight: 360 }}
                            >
                                {this.props.children}
                            </div>
                        </Content>
                    </Layout>
                </Layout>
            </div>
        );
    }
}
